<script setup>
    import { ref,onMounted,inject } from 'vue'
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    //import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'
    import { STLLoader } from 'three/addons/loaders/STLLoader.js';
    // init
    const props = defineProps({
        rotate_x: Number,
        rotate_y: Number,
        rotate_z: Number,
    })
    //const sensor = inject('sensor')
    const camera = new THREE.OrthographicCamera(-50,50, 50,-50, 0.1, 200 );
    camera.position.set(50,9,-50)
    camera.lookAt(0,0,0)

    const scene = new THREE.Scene();
    let rov = null
    //scene.background = new THREE.Color(0x233150);///{color:0x662232}

    const axesHelper = new THREE.AxesHelper(90);     //添加辅助坐标线
    scene.add(axesHelper);
    const axesHelper2 = new THREE.AxesHelper(-90);     //添加辅助坐标线
    scene.add(axesHelper2);
    
    const yy_light = new THREE.AmbientLight( 0x808080 ,2); // 柔和的白光
    scene.add(yy_light)

    const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 120,120)// window.innerWidth/2, window.innerHeight/2 );

    const loader = new  STLLoader();
    const mod_file_path = new URL('../assets/ROV2.STL',import.meta.url).href
    loader.load( mod_file_path, ( objj )=>{
    	//console.log('STL obj:',objj)
        //scene = objj.scene
        const mat = new THREE.MeshNormalMaterial()
        const mesh = new THREE.Mesh(objj,mat)
        //mesh.rotation.z = -Math.PI;
        mesh.scale.set(0.15,0.15,0.15)
        objj.center()
        scene.add(mesh)
        rov = mesh
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(do_render)
    }, undefined, error => {
        console.error( error );
    });
    /*
    const spotLight = new THREE.SpotLight( 0xffffff ,6);
    spotLight.position.set( 100, -200, -200 );
    scene.add(spotLight)
    */
    const controls = new OrbitControls( camera, renderer.domElement );
    controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        //console.log('camera.position',camera.position);
    });//监听鼠标、键盘事件

    onMounted(()=>{
        const  divEle = document.getElementById('gogo')
        const bgc_color = getComputedStyle(divEle).getPropertyValue('--rov_bgc')
        const rov_color = getComputedStyle(divEle).getPropertyValue('--rov_body')

        //scene.background = new THREE.Color( _r, _g, _b)
        //material.color.setStyle(rov_color)// = new THREE.Color($r, $g, $b)
        renderer.setClearColor(bgc_color,0.45)

        renderer.render(scene, camera); //执行渲染操作
        divEle.appendChild( renderer.domElement );
        //controls.saveState()
    })



    let [lastX,lastY,lastZ] = [0,0,0]
    function do_render(){
        //controls.reset()
        const x = -props.rotate_x/180 * Math.PI
        const y =  props.rotate_y/180 * Math.PI
        const z =  props.rotate_z/180 * Math.PI

        rov.rotateZ(z - lastZ)
        rov.rotateX(x - lastX)
        //rov.rotateY(y - lastY)

        lastX = x
        lastY = y
        lastZ = z
        renderer.render(scene,camera)

        requestAnimationFrame(do_render)
    }

</script>


<template>
    <div class="relative">
        <!-- <h3 class='lh3'>——ROV位置姿态模型——</h3> -->
        <div id="gogo"></div>
        <!-- <div class="absolute">
            <div>横滚角：{{rotate_x}}</div>
            <div>俯仰角：{{rotate_y}}</div>
            <div>航向角：{{dir_z}}</div>
            <div>水深：{{depth}}</div>
        </div> -->
        <!-- <div class="absolute2">
            <span>陀螺仪:{{sensor.jy9==0? 'OK' :'异常'}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>深度计:{{sensor.ms5==0? 'OK': '异常'}}</span>
        </div> -->
        <slot></slot>
    </div>
</template>

<style scoped>
.read-the-docs {
    color: #888;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
    top: 2.8em;
    left: 4px;
    z-index: 2;
    text-align: left;
}
.absolute2{
    position: absolute;
    bottom: 54px;
    left: 4px;
}
.lh3{
    text-align: right;
    margin: 0.2em 0;
    padding-right: 2em;
}
#gogo{
    --rov_bgc:#233150;
    --rov_body:#302c3a;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0px 0px 15px var(--rov_bgc);
}
@media (prefers-color-scheme: light) {
    #gogo{
        --rov_bgc:#a0a9a2;
        --rov_body:#2324d7;
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: 0px 0px 15px var(--rov_bgc);
    }
}
</style>
